<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>个人信息</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../styles/common.css" />
    <!--    头像文件上传样式-->
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
    <style>
        .box1{
            position: absolute;
            width: 100%;
            height: 180px;
            background-color: black;
            opacity:0.4;
            margin-top: -1010px;
        }
        .box2{
            position: absolute;
            width: 100%;
            height: 180px;
            margin-top: -130px;
            margin-left: 200px;
        }
        .line1{
            width: 100%;
            height: 2px;
            background-color: white;
            margin-top: -830px;
        }
        .box2:nth-child(n) h2{
            color: white;
        }
        h2:nth-child(2){
            margin: -70px 0 0 300px;
        }
        h2:nth-child(3){
            margin: -31px 0 0 400px;
        }
        h2:nth-child(4){
            margin: -32px 0 0 500px;
        }
        h2:nth-child(5){
            margin: -32px 0 0 630px;
        }
        h2:nth-child(6){
            margin: -32px 0 0 740px;
        }
        h2:nth-child(7){
            margin: -32px 0 0 860px;
        }

        #role1{
            width: 300px;height: 120px;position:absolute;background-color: #64B5EC;margin: 50px 0 0 200px;
            cursor: pointer;
        }
        #role2{
            width: 300px;height: 120px;position:absolute;background-color: whitesmoke;margin: 50px 0 10px 600px;
            cursor: pointer;
        }
        #role3{
            width: 300px;height: 120px;position:absolute;background-color: whitesmoke;margin: 50px 0 10px 1000px;
            cursor: pointer;
        }
        .loginBtn{
            cursor: pointer;width: 797px;
            height: 60px;
            background-color: #1AD85E;
            margin: 70px 0 0 0px;
            font-size: 35px;
            transition:all 0.4s;
            border: none;
            text-align: center;
            line-height:50px;
        }
        .loginBtn:hover{
            background-color: #FF7F97;

        }
    </style>


</head>

<body>
<div class="app" id="app" style="position: relative">

    <!--背景图大蒙板-->
    <div style=" background: #000;">
        <img style=" filter: alpha(opacity=60); width: 100%;height: 1000px" src="../../images/qiantai/test-bg.png"/>
    </div>

    <!--导航栏小蒙板-->
    <div class="box1" style="">
    </div>
    <!--白色分割线-->
    <div class="line1" style="">
    </div>

    <!--导航栏-->
    <div class="box2">
        <img src="../../images/qiantai/logo.png"/>
        <h2><a href="index.html">主页</a></h2>
        <h2><a href="menu.html">菜单</a></h2>
        <h2><a href="shopping_car.html">购物车</a></h2>
        <h2><a href="tables.html">餐桌</a></h2>
        <h2><a href="news.html">新闻</a></h2>
        <div style="width: 150px;height: 70px;margin: -45px 0px 0px 900px;text-align:center;line-height:70px;background-color: #1AD85E;font-size:25px;">
            <a href="login_user.html" style="color: white">SIN IN</a>
        </div>
    </div>

    <!--选择角色-->
    <div id="role1" @click="choose('role2')">
        <img style="margin-top: 20px" src="../../images/qiantai/Small1.png"/>
        <h2 style="margin: -80px 0 0 80px;position:absolute;">Account Login</h2>
        <p style="margin: -40px 0 0 80px;position:absolute;">通过账号登录信息</p>
    </div>

    <div id="role2" @click="choose('role3',null)">
        <img style="border-radius: 50%;width:70px;height:70px;margin-top: 20px" src="../../images/qiantai/Small2.png"/>
        <h2 style="margin: -80px 0 0 80px;position:absolute;">Room Delivery</h2>
        <p style="margin: -40px 0 0 80px;position:absolute;">拨打联系方式进行房间配送</p>
    </div>

    <div id="role3" @click="toAdminLogin()">
        <img style="border-radius: 50%;width:70px;height:70px;margin-top: 20px" src="../../images/qiantai/Small3.png"/>
        <h2 style="margin: -80px 0 0 80px;position:absolute;">Admin Login</h2>
        <p style="margin: -40px 0 0 80px;position:absolute;">前往后台登录</p>
    </div>

    <!--输入账号信息登录-->
    <div v-if="role1" style="width: 900px;height: 500px;margin:300px 0 0 300px; background-color: wheat;position:absolute;">
        <div style="margin: 10px 0 0 50px">
            <h1>ACCOUNT LOGIN</h1>
            <div style="font-size: 20px;color: #79A2D0;width: 700px;height: 200px">
                下单前请先进行注册。注册或登录您的帐户。
                <p style="color: #b3d8ff;cursor: pointer" @click="choose('role1','loginForm')">前往注册</p>
            </div>
        </div>
        <div style="margin:-80px 0 0 0px ">
            <el-form style="margin: 0px 0 0 -50px" :model="loginForm" :rules="rules" ref="loginForm" label-width="100px" class="demo-register">
                <el-form-item   prop="username">
                    <el-input style="width: 400px;height: 50px;" v-model="loginForm.username" placeholder="请输入用户名"></el-input>
                </el-form-item>


                <el-form-item prop="password">
                    <el-input  style="width: 400px;height: 50px;;" type="password" placeholder="请输入密码" v-model="loginForm.password"></el-input>
                </el-form-item>




<!--                <input placeholder="输入用户名" v-model.number="loginForm.username" style="width: 350px;height: 50px;margin-right: 80px"  type="text" :rules="rules"/>-->
<!--                <input  type="password" placeholder="输入密码" v-model.number="loginForm.password" style="width: 350px;height: 50px" type="text"  :rules="[{required:true, message: '密码不能为空'},]"/>-->



                <el-form-item>
                    <p class="loginBtn"  @click="login">登录</p>
<!--                    <el-button @click="resetForm('loginForm')">全部重置</el-button>-->
                </el-form-item>

            </el-form>

        </div>
    </div>

    <!--注册-->
    <div v-if="role2" style=" overflow: auto;width: 900px;height: 500px;margin:300px 0 0 300px; background-color: wheat;position:absolute;">
        <div style="margin: 10px 0 0 50px">
            <h1>注册</h1>
            <div style="font-size: 20px;color: #79A2D0;width: 700px;height: 200px">To place your order now, log in to your existing account or sign up.
                Sign up or log in to your account
                <p style="color: #b3d8ff;cursor: pointer" @click="choose('role2','register')">前往登录</p>
            </div>
        </div>


        <div style="margin:-80px 0 0 50px;">
            <el-form :model="register" :rules="rules"   ref="register" label-width="100px" class="demo-register">
                <el-form-item style="width: 400px" label="账号：" prop="username">
                    <el-input v-model="register.username"></el-input>
                </el-form-item>

                <el-form-item style="width: 400px" label="密码：" prop="password">
                    <el-input type="password" v-model="register.password"></el-input>
                </el-form-item>

                <el-form-item style="width: 400px"  label="姓名：" prop="name">
                    <el-input v-model="register.name"></el-input>
                </el-form-item>

                <el-form-item style="width: 400px"  label="头像：" prop="avatar">
                    <el-upload class="avatar-uploader"
                               action="/photos/upload"
                               :show-file-list="false"
                               :on-success="handleAvatarSuccess"
                               :before-upload="beforeUpload"
                               ref="upload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>

                <el-form-item style="width: 400px"  label="手机号：" prop="phone">
                    <el-input v-model="register.phone"></el-input>
                </el-form-item>

                <el-form-item style="width: 400px"  label="性别：" prop="sex">
                    <el-radio-group v-model="register.sex">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item style="width: 400px"  label="省份证号：" prop="idNumber">
                    <el-input v-model="register.idNumber"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="toRegister">注册</el-button>
                    <el-button @click="resetForm('register')">全部重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>

    <!--房间配送-->
    <div v-if="role3" style="width: 900px;height: 500px;margin:300px 0 0 300px; background-color: wheat;position:absolute;">
        <div style="margin: 10px 0 0 50px">
            <h1>房间配送</h1>
            <div style="font-size: 20px;color: #79A2D0;width: 700px;height: 200px">为了方遍您在酒店房间进行点餐,我们设定了电话预定点餐的服务！如需需要，请拨打电话:</div>
            <div style="font-size: 50px">44444-55555-66666</div>
        </div>

    </div>
    </div>


</div>


<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<!--<script src="../../js/request.js"></script>-->


<script>
    new Vue({
        el: '#app',


        data:{
            userInfo:{},   //用户信息
            admin:{},   //用户信息
            radio: '1',

            role1:true,
            role2:false,
            role3:false,

            //登录信息
            loginForm:{},

            //注册表单
            register:{},
            imageUrl:'',   //弹框图片上传下载


            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
                ],
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入手机号码', trigger: 'blur' },
                    { min: 3, max: 11, message: '长度在 3 到 11 个字符', trigger: 'blur' }
                ],
                sex: [
                    { required: true, message: '请选择性别', trigger: 'blur' },
                ],
                idNumber: [
                    { required: true, message: '请输入省份证号', trigger: 'blur' },
                    { min: 18, max:18, message: '请输入18位的省份证号', trigger: 'blur' }
                ],
            },

        },

        created() {
            const userInfo = window.localStorage.getItem('userInfo')
            const userInfo2 = window.localStorage.getItem('admin')
            console.log("userInfo11:::"+userInfo)
            console.log("userInfo12:::"+userInfo2)
            if (userInfo) {
                this.userInfo = JSON.parse(userInfo)
            }
            console.log("userInfo22:::"+userInfo)
        },


        methods: {


            choose(role,form){

                //表单(登录注册的表单)验证清空
                if (form!=null){
                    this.resetForm(form);
                }

                if (role=='role1'){ //前往注册


                    document.getElementById("role2").style.background="#64B5EC";
                    document.getElementById("role1").style.background="whitesmoke";

                    this.role1=false
                    this.role2=true
                    this.role3=false
                }else if (role=='role2') {  //前往登录

                    document.getElementById("role1").style.background="#64B5EC";
                    document.getElementById("role2").style.background="whitesmoke";
                    this.role1=true
                    this.role2=false
                    this.role3=false
                }else if (role=='role3') {

                    document.getElementById("role2").style.background="#64B5EC";
                    document.getElementById("role1").style.background="whitesmoke";
                    this.role1=false
                    this.role2=false
                    this.role3=true
                }
            },

            //重置
            resetForm(formName) {
                this.$refs[formName].resetFields()
            },
            login() {
                this.$refs.loginForm.validate((valid)=>{
                    if (valid){
                        if (this.userInfo.data == null){
                            axios.post("/users/login",this.loginForm).then((res)=>{
                                console.log(res)
                                console.log(res.data.code)
                                this.$message.success(res.data.msg)
                                if(res.data.code){
                                    localStorage.setItem('userInfo',JSON.stringify(res.data))
                                    window.location.href='index.html';
                                    alert(res.data.msg)
                                    this.$message.success("登录成功")
                                }else {
                                    alert(res.data.msg)
                                    window.location.href='login_user.html';
                                    this.$message.error(res.data.msg)
                                }
                            })
                        }else {
                            alert("用户已登录！请先退出账号！")
                        }
                    }})


            },
            //前往管理员登录界面
            toAdminLogin(){
                window.location.href="../login/login_admin.html"
            },

            toRegister() {
                this.$refs.register.validate((valid)=>{
                    if (valid){
                        console.log("提交的内容：")
                        console.log(this.register)
                        axios.post("/users/add",this.register).then((res)=>{
                            if(res.data.code){
                                this.$message.success("注册成功!");
                                console.log("提交后响应得内容：")
                                console.log(res.data)

                                this.role1=true
                                this.role2=false
                                this.role3=false
                            }else{
                                this.$message.error(res.data.msg);
                                this.role1=false
                                this.role2=true
                                this.role3=false
                            }
                        })
                    }
                })
            },
            //4.图片文件上传
            handleAvatarSuccess (response, file, fileList) {
                console.log("response:")
                console.log(response)
                this.register.avatar=response.data

                this.imageUrl = `/photos/download?name=${response.data}`
            },
            beforeUpload (file) {
                if(file){
                    const suffix = file.name.split('.')[1]
                    const size = file.size / 1024 / 1024 < 2
                    if(['png','jpeg','jpg'].indexOf(suffix) < 0){
                        this.$message.error('上传图片只支持 png、jpeg、jpg 格式！')
                        this.$refs.upload.clearFiles()
                        return false
                    }
                    if(!size){
                        this.$message.error('上传文件大小不能超过 2MB!')
                        return false
                    }
                    return file
                }
            },

        }
    })
</script>


</body>
</html>

